vue2 与 vue3 变化总结

yarn global add @vue/cli
# 或
npm install -g @vue/cli

const app = Vue.createApp({
  /* 选项 */
});

const instance = Vue.createApp({})
  .component("SearchInput", SearchInputComponent) // 全局组件
  .directive("focus", FocusDirective) // 全局指令
  .use(LocalePlugin) // 插件
  .use(router) // 路由，现在路由和状态机被当做插件使用
  .use(store) // 状态机
  .mount("#app"); // 挂载

<div v-bind="$attrs"></div>

<!-- 这两个 one() 和 two() 将执行按钮点击事件 -->
<button @click="one($event), two($event)">Submit</button>

<input type="text" @keypress.q="inputQ" />

<!-- Vue 3 在 v-on 上使用按键修饰符 -->
<input v-on:keyup.page-down="nextPage" />

<!-- 同时匹配 q 和 Q -->
<input v-on:keypress.q="quit" />

<input v-model="searchText" />

<input :value="searchText" @input="searchText = $event.target.value" />

<my-input v-model="searchText" />

<my-input :model-value="searchText" @update:model-value="searchText = $event"></my-input>

app.component("custom-input", {
  props: ["modelValue"],
  emits: ["update:modelValue"],
  template: `
    <input
      :value="modelValue"
      @input="$emit('update:modelValue', $event.target.value)"
    >
  `,
});

<my-component v-model:attrname="bookTitle"></my-component>

import { defineComponent } from "vue";
export default defineComponent({
  name: "ChildComponent",
  emits: ['update:attrname']
  props: {
    attrname: String,
  },
  created() {
    this.$emit("update:attrname", "返给你一个初始值");
  },
});

// 修饰符例子
type ModifierExamples = "upper" | "lower";

// 默认 v-model 的修饰符 prop 名
type DefaultModifierProp = "modelModifiers";

// 默认 v-model 的修饰符 prop 值
type DefaultModifierPropValue = {
  [key in ModifierExamples]?: true;
};

// 自定义 v-model 的修饰符 prop 名，例如 v-model:custom
type CustomModifier = "custom";
type CustomModifierProp = `${CustomModifier}Modifiers`;

// 自定义 v-model:custom 的修饰符 prop 值
type CustomModifierPropValue = {
  [key in ModifierExamples]?: true;
};

<custome-el v-model.upper.lower="value" v-model:title.upper="title" />

import { defineComponent } from "vue";

export default defineComponent({
  name: "CustomeEl",
  emits: {
    "update:modelValue": null,
    "update:title": null,
  },
  props: {
    modelValue: String,
    title: String,
    // v-model 的修饰符
    modelModifiers: {
      default: () => ({}),
    },
    // v-model:title 的修饰符
    titleModifiers: {
      default: () => ({}),
    },
  },
  created() {
    console.log(this.modelModifiers, this.titleModifiers);
    // 将会打印 {upper: true, lower: true} {upper: true}
  },
});

import { createApp, defineAsyncComponent } from "vue";

createApp({
  // ...
  components: {
    AsyncComponent: defineAsyncComponent(() => import("./components/AsyncComponent.vue")),
  },
});

<template>
  <div>
    <!-- 使用 setup return 对象的 count 属性 -->
    {{ count }}
  </div>
</template>

<script lang="ts">
  import { defineComponent } from "vue";

  export default defineComponent({
    setup() {
      // return 一个对象，其值可以在模板中使用
      return { count: 1 };
    },
  });
</script>

export default defineComponent({
  setup() {
    let count = 0;
    setInterval(() => count++, 1000);
    return { count };
  },
});

import { h, defineComponent } from "vue";

export default defineComponent({
  setup() {
    return () => h("div", {}, ["翻译翻译，什么叫惊喜？"]);
  },
});

import { defineComponent } from "vue";

export default defineComponent({
  setup() {
    return () => <div>翻译翻译，什么叫惊喜？</div>;
  },
});

<script lang="tsx">
  import { defineComponent } from "vue";

  export default defineComponent({
    setup(props, context) {
      return () => <div class="root">翻译翻译，什么叫惊喜？</div>;
    },
  });
</script>
<style lang="sass" scoped>
  .root
    background: red
    color: white
</style>

export default {
  expose: ["play"],
  setup(props, { expose }) {
    //...

    expose({
      play() {
        console.log("音频开始播放！");
        // ...
      },
    });

    //...
  },
};

const count = ref(0);

const stoper = watchEffect(() => console.log(count.value));
// 依次打印 0 ,1 ,2 ,3

const tiemr = setInterval(() => {
  count.value++;

  // 值为 4 时停止
  if (count.value > 3) {
    stoper();
    clearInterval(tiemr);
  }
}, 100);

// 父组件
import { defineComponent, provide, ref } from "vue";
import Test from "./Test.vue";

export default defineComponent({
  name: "HelloWorld",
  components: { Test },
  setup() {
    const count = ref(0);
    const changeCount = (v) => (count.value = v);

    provide("countContext", { count, changeCount });
  },
});

// 子组件
import { defineComponent, inject, useCssModule } from "vue";

export default defineComponent({
  setup(props, { emit }) {
    const { count, changeCount } = inject("countContext" /* 可选默认值 */);

    return () => <div onClick={() => changeCount(count.value + 1)}>this is count :{count.value}</div>;
  },
});

watchEffect((onInvalidate) => {
  const timer = setTimeout(fn, 3000);

  onInvalidate(() => {
    clearTimeout(timer);
  });
});

import { defineComponent, onMounted, onBeforeMount } from "vue";

export default defineComponent({
  setup() {
    onMounted(() => console.log("组件挂载后"));
    onBeforeMount(() => console.log("组件挂载前"));
  },
});